<template>
  <div class="app-grid-3d-section">
    <h2 class="section-title">{{ title }}</h2>
    <div class="app-grid-3d" :id="gridId">
      <Card3D
        v-for="(app, index) in apps"
        :key="app.id"
        :title="app.appName"
        :subtitle="app.appDesc"
        :back-content="getAppBackContent(app)"
        :delay="index * 0.05"
        class="app-card-3d"
        @click="handleAppClick(app)"
      >
        <template #icon>
          <img 
            :src="app.appIcon || '/default-app-icon.png'" 
            :alt="app.appName" 
            class="app-icon-3d"
            @error="handleImageError"
          />
        </template>
        <template #content>
          <div class="app-info">
            <div class="app-type">{{ app.appType }}</div>
            <div class="app-stats">
              <div class="stat-item">
                <span class="stat-number">{{ formatNumber(app.reviewCount || 0) }}</span>
                <span class="stat-label">评价</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">{{ app.reviewScore || '4.5' }}</span>
                <span class="stat-label">评分</span>
              </div>
            </div>
          </div>
        </template>
        <template #footer>
          <div class="app-actions">
            <button class="app-btn primary" @click.stop="$emit('view-chat', app.id)">
              开始对话
            </button>
            <button 
              v-if="app.deployKey" 
              class="app-btn secondary" 
              @click.stop="$emit('view-work', app)"
            >
              查看作品
            </button>
          </div>
        </template>
      </Card3D>
    </div>
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <a-spin size="large" />
    </div>
    
    <!-- 分页 -->
    <div v-if="!loading && apps.length > 0" class="pagination-wrapper">
      <a-pagination
        v-model:current="page.current"
        :total="page.total"
        :page-size="page.pageSize"
        :show-size-changer="false"
        :show-quick-jumper="false"
        :show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 个应用`"
        @change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import Card3D from './3d/Card3D.vue'
import { Animation3D } from '@/utils/animation3d'

interface Props {
  title: string
  apps: API.AppVO[]
  loading: boolean
  page: {
    current: number
    pageSize: number
    total: number
  }
  gridId: string
  featured?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  featured: false
})

const emit = defineEmits<{
  'view-chat': [appId: string | number | undefined]
  'view-work': [app: API.AppVO]
  'page-change': [page: number]
}>()

const getAppBackContent = (app: API.AppVO) => {
  return `应用类型: ${app.appType}\n创建时间: ${new Date(app.createTime || '').toLocaleDateString()}\n${app.appDesc || '暂无详细描述'}`
}

const formatNumber = (num: number) => {
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K'
  }
  return num.toString()
}

const handleImageError = (event: Event) => {
  const img = event.target as HTMLImageElement
  img.src = '/default-app-icon.png'
}

const handleAppClick = (app: API.AppVO) => {
  emit('view-chat', app.id)
}

const handlePageChange = (page: number) => {
  emit('page-change', page)
}

onMounted(() => {
  nextTick(() => {
    // 初始化3D效果
    const cards = document.querySelectorAll(`#${props.gridId} .app-card-3d`)
    cards.forEach((card, index) => {
      Animation3D.createScrollTrigger3D(card as HTMLElement, {
        start: "top 90%",
        end: "bottom 10%"
      })
    })
  })
})
</script>

<style scoped>
.app-grid-3d-section {
  margin: 60px 0;
}

.section-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 32px;
  color: #1e293b;
  text-align: center;
}

.app-grid-3d {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  justify-items: center;
  margin-bottom: 40px;
}

.app-card-3d {
  will-change: transform, box-shadow;
}

.app-icon-3d {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
}

.app-info {
  margin: 16px 0;
}

.app-type {
  font-size: 12px;
  color: #64748b;
  background: #f1f5f9;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.app-stats {
  display: flex;
  gap: 16px;
}

.stat-item {
  text-align: center;
  flex: 1;
}

.stat-number {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #3b82f6;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.app-actions {
  display: flex;
  gap: 8px;
}

.app-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.app-btn.primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
}

.app-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.app-btn.secondary {
  background: rgba(148, 163, 184, 0.1);
  color: #64748b;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.app-btn.secondary:hover {
  background: rgba(148, 163, 184, 0.2);
  transform: translateY(-1px);
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-grid-3d {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .section-title {
    font-size: 24px;
  }
  
  .app-actions {
    flex-direction: column;
  }
}
</style>